<script setup lang="tsx">
import type { TableColumn } from '@/components/core/dynamic-table';
import dayjs from 'dayjs';
import Api from '@/api/';
import { useTable } from '@/components/core/dynamic-table';
import { formatToDateTime } from '@/utils/dateUtil';

defineOptions({
  name: 'SystemMonitorOperationLog',
});

const [DynamicTable] = useTable();

const columns: TableColumn<API.OperationLogInfo>[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 60,
    hideInSearch: true,
  },
  {
    title: '操作模块',
    dataIndex: 'module',
    width: 120,
  },
  {
    title: '操作类型',
    dataIndex: 'actionType',
    width: 120,
  },
  {
    title: '耗时',
    dataIndex: 'duration',
    width: 80,
    customRender: ({ record }) => <Tag>{record.duration}ms</Tag>,
  },
  {
    title: '操作时间',
    width: 120,
    dataIndex: 'operationTime',
    customRender({ record }) {
      return formatToDateTime(record.createdAt);
    },
    formItemProps: {
      component: 'RangePicker',
      componentProps: {
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
      transform([startDate, endDate] = []) {
        if (startDate && endDate) {
          return [
            dayjs(startDate).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
            dayjs(endDate).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
          ];
        }
      },
    },
  },
];
</script>

<template>
  <div id="auto-height" style="height: 80%">
    <DynamicTable
      header-title="操作日志"
      auto-height="#auto-height"
      :data-request="Api.systemLog.logOperationList"
      :columns="columns"
    />
  </div>
</template>
